<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="home-aside" width="250px">
      <!-- logo -->
      <div class="home-logo-div">
        <router-link to="/customer/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <!-- 折叠icon -->
      <el-icon
        class="toggle-button"
        v-model="isCollapse"
        @click="toggleCollapse"
        size="20px"
      >
        <Fold v-if="!isCollapse" />
        <Expand v-if="isCollapse" />
      </el-icon>
      <!-- 侧边栏菜单 -->
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
      >
        <el-menu-item index="/customer/food">
          <el-icon>
            <Search />
          </el-icon>
          <span slot="title">菜品列表</span>
        </el-menu-item>
        <el-menu-item index="/customer/recommend">
          <el-icon>
            <MagicStick />
          </el-icon>
          <span slot="title">猜你想吃</span>
        </el-menu-item>
        <el-menu-item index="/customer/order">
          <el-icon>
            <Wallet />
          </el-icon>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/customer/account">
          <el-icon>
            <User />
          </el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-image src="../src/assets/plate.png" class="plate-div"></el-image>
    </el-aside>

    <el-container>
      <el-header class="home-header" height="80px">
        <el-avatar class="user-avatar" :src="avatarSrc" fit="cover" :size="60" />
        <div class="greeting">
          <span>亲爱的顾客 {{ username }} ， </span><br />
          <span> 欢迎使用智能点餐系统 ！</span>
        </div>
        <div class="home-info">
          <div class="date">
            <p>当前时间：</p>
            <p class="time-unit-year">{{ date.year }}</p>
            <p class="separator">年</p>
            <p class="time-unit">{{ date.month }}</p>
            <p class="separator">月</p>
            <p class="time-unit">{{ date.day }}</p>
            <p class="separator">日</p>
            <p class="time-unit">{{ date.hour }}</p>
            <p class="separator">时</p>
            <p class="time-unit">{{ date.minute }}</p>
            <p class="separator">分</p>
            <p class="time-unit">{{ date.second }}</p>
            <p class="separator">秒</p>
          </div>
          <div class="restaurant">
            <p>当前餐厅：O2氧气层（武大店）</p>
          </div>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar height="568px">
          <!-- 轮播图 -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in sceneList" :key="index">
                <el-image :src="item._thumburl" alt="" />
              </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
          </div>

          <!-- 排行榜 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card class="home-rank-card" :body-style="{ padding: '10px' }">
                <!-- 卡片标题 -->
                <div class="rank-head">
                  <div class="rank-title">
                    <span>最</span>
                    <span style="color: #d81e06"
                      ><svg
                        t="1700284969270"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4261"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                          p-id="4262"
                          fill="#d81e06"
                        ></path></svg
                      >HOT</span
                    >
                    <span>菜品</span>
                  </div>
                  <!-- 排行选项 -->
                  <div class="rank-option">
                    <el-radio-group v-model="rankOption1" @change="changeData">
                      <el-radio-button label="latest" border size="small"
                        >近七日</el-radio-button
                      >
                      <el-radio-button label="history" border size="small"
                        >历史</el-radio-button
                      >
                    </el-radio-group>
                  </div>
                </div>
                <div></div>
                <!-- 排行数据 -->
                <div class="rank-data">
                  <el-row
                    v-for="(rankItem, index) in rankList"
                    class="rank-row"
                    @click="gotoFoodDetail(rankItem)"
                    ><el-col :span="2"
                      ><span>{{ index + 1 }}</span></el-col
                    ><el-col :span="16"
                      ><span
                        >{{
                          rankItem.foodName
                        }}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span
                      ></el-col
                    ><el-col :span="3"
                      ><svg
                        t="1700284969270"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4261"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                          p-id="4262"
                          fill="#d81e06"
                        ></path></svg
                      >{{ rankItem.saleNumber }}</el-col
                    ><el-col :span="2"
                      ><el-icon style="margin: 8px 0px 0px">
                        <ArrowRightBold /> </el-icon></el-col
                  ></el-row>
                </div>
              </el-card>
            </el-col>
            <!-- 进行中的订单 -->
            <el-col :span="12">
              <el-card class="home-rank-card" :body-style="{ padding: '10px' }">
                <!-- 卡片标题 -->
                <div class="rank-head">
                  <div class="rank-title">
                    <span>进行中的订单</span>

                    <el-button text class="rank-button" @click="gotoOrder"
                      ><el-icon> <ArrowRightBold /> </el-icon
                    ></el-button>
                  </div>
                </div>
                <div v-if="orderNotAccepted.length === 0 && orderAccepted.length === 0">
                  <el-image
                    src="../src/assets/emptyOrder.png"
                    style="width: 150px"
                  ></el-image>
                  <div>暂无进行中的订单</div>
                </div>
                <!-- 订单数据 -->
                <div v-if="orderNotAccepted.length !== 0 || orderAccepted.length !== 0">
                  <el-scrollbar height="200px">
                    <!-- 待接单的订单 -->
                    <el-row
                      v-for="orderItem in orderNotAccepted"
                      class="order-row"
                      @click="gotoOrderDetail(orderItem.id)"
                    >
                      <!-- 图像列 -->
                      <el-col :span="6"
                        ><el-image
                          class="home-order-image"
                          :src="orderItem.photo"
                          fit="cover"
                      /></el-col>
                      <!-- 信息列 -->
                      <el-col :span="18"
                        ><el-row><el-tag type="info">待接单</el-tag></el-row
                        ><el-row>下单时间：{{ orderItem.orderTime }}</el-row></el-col
                      >
                    </el-row>
                    <!-- 制作中的订单 -->
                    <el-row
                      v-for="orderItem in orderAccepted"
                      class="order-row"
                      @click="gotoOrderDetail(orderItem.id)"
                    >
                      <!-- 图像列 -->
                      <el-col :span="6"
                        ><el-image
                          class="home-order-image"
                          :src="orderItem.photo"
                          fit="cover"
                      /></el-col>
                      <!-- 信息列 -->
                      <el-col :span="18"
                        ><el-row><el-tag type="warning">制作中</el-tag></el-row
                        ><el-row>下单时间：{{ orderItem.orderTime }}</el-row>
                        <el-row>接单时间：{{ orderItem.orderRectime }}</el-row></el-col
                      ></el-row
                    >
                  </el-scrollbar>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-main>
      <el-backtop :right="80" :bottom="100" />
    </el-container>
  </el-container>
</template>

<script>
import Swiper from "swiper/swiper-bundle.min.js";

export default {
  data() {
    return {
      isCollapse: false, //是否折叠侧边栏
      date: {
        year: "",
        month: "",
        day: "",
        hour: "",
        minute: "",
        second: "",
      },
      sceneList: [
        { _name: "轮播1", _thumburl: "../src/assets/posters/poster1.png" },
        { _name: "轮播2", _thumburl: "../src/assets/posters/poster2.png" },
        { _name: "轮播3", _thumburl: "../src/assets/posters/poster3.png" },
      ],
      rankOption1: "latest",
      rankOption2: "latest",
      avatarSrc: "",
      username: "",
      rankList: [],
      orderList: [],
      orderNotAccepted: [],
      orderAccepted: [],
      account: {},
    };
  },
  created() {
    console.log("进入系统");
    console.log(this.$store.state.account);
    this.account = JSON.parse(this.$store.state.account);
    console.log(this.account);
    this.avatarSrc = "http://localhost:8080" + this.account.avatar;
    console.log(this.avatarSrc);
    this.username = this.account.username;
    this.getRecentHot();
    this.getOrderList();
    name: "HomeSwiper", this.updateTime();
    setInterval(this.updateTime, 1000); // 更新时间的定时器，每秒更新一次
  },
  methods: {
    // 切换侧边栏的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    updateTime() {
      const now = new Date();
      this.date.year = now.getFullYear();
      this.date.month = now.getMonth() + 1;
      this.date.day = now.getDate();
      this.date.hour = now.getHours();
      this.date.minute = now.getMinutes();
      this.date.second = now.getSeconds();
    },
    changeData() {
      if (this.rankOption1 == "latest") this.getRecentHot();
      else this.getHistoryHot();
      console.log(this.rankOption1);
    },
    getHistoryHot() {
      let url = "/foods?orderField=saleNumber&&pageSize=5";
      let _this = this;
      this.$http.get(url).then(function (response) {
        console.log(response.data.records);
        _this.rankList = response.data.records;
      });
    },
    getRecentHot() {
      let url = "/foods/recentHot";
      let _this = this;
      this.$http.get(url).then(function (response) {
        _this.rankList = response.data;
      });
    },
    gotoFoodDetail(fooditem) {
      this.$router.push({
        path: "/customer/fooddetail",
        state: {
          foodID: fooditem.id,
          lastpage: "/customer/home",
        },
      });
    },
    getOrderList() {
      let _this = this;
      let url = "/orders?userID=" + _this.account.id;
      _this.$http.get(url).then(function (response) {
        _this.orderList = response.data.records;
        for (let i = 0; i < _this.orderList.length; i++) {
          _this.orderList[i].photo = "http://localhost:8080" + _this.orderList[i].photo;
        }
        // 对订单状态分类
        for (let i = 0; i < response.data.records.length; i++) {
          // 待接单的订单
          if (_this.orderList[i].orderRectime === null) {
            _this.orderNotAccepted.push(_this.orderList[i]);
          }
          // 制作中的订单
          else if (_this.orderList[i].orderFinishTime === null) {
            _this.orderAccepted.push(_this.orderList[i]);
          }
        }
      });
    },
    gotoOrderDetail(orderID) {
      let _this = this;
      _this.$router.push({
        path: "/customer/orderdetail",
        state: {
          orderID: orderID,
          lastpage: "/customer/home",
        },
      });
    },
    gotoOrder() {
      let _this = this;
      _this.$router.push({
        path: "/customer/order",
      });
    },
  },
  // swiper6属性配置,在生命周期mounted中，动态数据把下面的配置放到获取数据的后面执行即可
  mounted() {
    let _self = this;
    new Swiper(".swiper-container", {
      spaceBetween: 30,
      slidesPerView: 1,
      grabCursor: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      loop: true,
      centeredSlides: true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 允许分页点击跳转
      },
      autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
      // on: {
      //   click: function (swiper) {
      //     console.log("触发点击事件");
      //     console.log(swiper["clickedIndex"]);
      //     var index = swiper["clickedIndex"];
      //     _self.activeClass = index;
      //     // 切换选中空间
      //     _self.imgCheck("", index);
      //   },
      // },
    });
  },
};
</script>

<style>
.home-aside {
}

.home-logo-div {
  margin-top: 30px;
  width: 220px;
}

.toggle-button {
  cursor: pointer;
  height: 20px;
  margin-right: 145px;
}

.home-menu-vertical {
  margin-left: 20px !important;
  --el-menu-bg-color: #fff0 !important;
  border-right: solid 3px #e3a566 !important;
}

.home-menu-vertical:not(.el-menu--collapse) {
  width: 180px;
  min-height: 300px;
}

.el-menu-item {
  font-family: sanji;
  border-radius: 18px;
  border-top: 4px solid #e3a566;
  margin-top: 4px;
  --el-menu-item-height: 60px;
  font-size: 20px !important;
  --el-menu-text-color: #000;
  background-color: #fff;
}

.el-menu-item.is-active {
  color: #e3a566 !important;
}

.el-menu-item:hover {
  transform: translateY(-2px);
  color: #eed8ae !important;
}

.plate-div {
  width: 150px;
  margin-top: 113px;
  margin-right: 50px;
}

.home-header {
  margin-top: 15px;
  padding-top: 10px !important;
  border-radius: 18px;
  background-color: #e3a566;
}

.user-avatar {
  float: left;
  margin-left: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 3px solid #ffdab9;
}

.greeting {
  margin-left: 30px;
  float: left;
  text-align: left;
  font-family: sanji;
  font-size: 18px;
  line-height: 30px;
}

.home-info {
  float: right;
  margin-top: 10px;
  font-family: sanji;
  font-size: 16px;
  text-align: left;
  line-height: 14px;
}

.date {
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.restaurant {
  height: 5px;
}

.time-unit {
  width: 30px;
  text-align: center;
  margin: 0;
  padding: 0;
}

.time-unit-year {
  width: 46px;
  text-align: center;
  margin: 0;
  padding: 0;
}

.separator {
  margin: 0;
  padding: 0;
}

/* 轮播图 */
.swiper-container {
  width: 900px;
  height: 275px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff !important;
}

.swiper-pagination-bullet-active {
  background-color: #fff !important;
}

.rank-head {
  text-align: left;
  margin: 10px;
}

.rank-button {
  float: right;
}

.rank-option {
  margin-top: 10px;
}

.el-backtop {
  color: #e3a566 !important;
}

.home-rank-card {
  height: 270px;
  border-radius: 15px !important;
}

.rank-data {
  margin: 0 auto;
  padding: 0px 10px;
  line-height: 30px;
  cursor: pointer;
}

.rank-row {
  margin-left: 15px;
  padding: 0px 5px;
  text-align: left;
}
.rank-row:hover {
  transform: translateY(-2px) translateX(2px);
  background-color: #e3a566;
  font-size: 18px;
}
.home-order-image {
  width: 70px;
  height: 63px;
}
.order-row {
  padding-top: 5px;
  margin-left: 20px;
  margin-bottom: 5px;
  height: 80px;
  cursor: pointer;
}
.order-row:hover {
  transform: translateY(-3px);
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1) !important;
}

/* 适配PC */
@media screen and (min-width: 960px) {
}
/* 适配iPad */
@media screen and (max-width: 960px) and (min-width: 600px) {
  .el-header {
    /* width: 550px; */
    margin-right: 10vw;
    height: 150px !important;
  }
  .el-main {
    margin-right: 10vw;
  }

  .home-info {
    margin: 20px 50px;
  }

  .swiper-container {
    width: 500px;
    height: 150px;
  }
}
@media screen and (max-width: 600px) {
  .login-logo-div {
    position: absolute;
    width: 300px;
    margin-top: 20px;
  }
  .plateDiv,
  .titleDiv {
    display: none;
  }

  .loginCard {
    position: absolute;
    left: 10vw;
    width: 70vw !important;
    margin: calc(120px + 1vw) auto 0;
  }
  .registerCard {
    position: absolute;
    width: 70vw !important;
    margin-top: calc(120px + 1vw);
    margin-left: 10vw;
  }
}
</style>
